<template>
  <div class="container">
    <nav class="nav"><van-icon @click="IconBack" class="header-icon" name="arrow-left" /><div class="title">报名信息录入</div></nav>
    <van-notice-bar left-icon="info-o" text="请仔细填写内容,一旦点击下一步不可更改！"/>
    <van-tabs v-model="active"
              swipeable
              @change="change">
      <van-tab title="身份验证" :disabled="disable1">
        <authentication :disable.sync="disable2" @part1="part1"></authentication>
      </van-tab>
      <van-tab title="个人资料" :disabled="disable2">
        <personal v-on:part2="part2"></personal>
      </van-tab>
      <van-tab title="报名信息" :disabled="disable3">
        <bm-information @part3="part3"></bm-information>
      </van-tab>
      <van-tab title="学习/工作" :disabled="disable4">
        <learn-work @part4="part4"></learn-work>
      </van-tab>
      <van-tab title="社会关系" :disabled="disable5">
        <social-relations @part5="part5"></social-relations>
      </van-tab>
      <van-tab title="联系方式" :disabled="disable6">
        <contact></contact>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import Vue from 'vue'
import {
  Button,
  Tab,
  Tabs,
  Form,
  Field,
  Cell,
  NoticeBar,
  DatetimePicker,
  Popup,
  Picker,
  Area,
  RadioGroup,
  Radio,
  SwipeCell,
  Card,
  Toast,
  Icon
} from 'vant'
import Authentication from './components/authentication'
import Personal from './components/personal/personal'
import BmInformation from './components/BmInformation'
import LearnWork from './components/learnWork'
import SocialRelations from './components/socialRelations'
import Contact from './components/contact'

Vue.use(Button).use(Tab).use(Tabs).use(Form).use(Field).use(Cell).use(NoticeBar)
  .use(DatetimePicker).use(Popup).use(Picker).use(Area).use(RadioGroup).use(Radio)
  .use(SwipeCell).use(Card).use(Toast).use(Icon)
export default {
  name: 'index',
  components: {
    Contact,
    SocialRelations,
    LearnWork,
    BmInformation,
    Personal,
    Authentication
  },
  data () {
    return {
      active: 0,
      // 身份信息初始化开启
      disable1: false,
      // 个人基本信息一栏开关
      disable2: true,
      // 报名信息一栏开关
      disable3: true,
      // 报名信息一栏开关
      disable4: true,
      // 社会关系
      disable5: true,
      //  联系方式
      disable6: true
    }
  },
  methods: {
    change (name, title) {
    },
    part1 (n) {
      this.disable2 = n
      setTimeout(() => {
        this.active = 1
      })
    },
    // 个人基本信息开关对应处理函数
    part2 (n) {
      this.disable3 = n
      setTimeout(() => {
        this.active = 2
      })
    },
    // 报名信息开关对应处理函数
    part3 (n) {
      this.disable4 = n
      setTimeout(() => {
        this.active = 3
      })
    },
    // 工作经历开关对应处理函数
    part4 (n) {
      this.disable5 = n
      setTimeout(() => {
        this.active = 4
      })
    },
    part5 (n) {
      this.disable6 = n
      setTimeout(() => {
        this.active = 5
      })
    },
    IconBack () {
      this.$router.push('/')
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  width: 100%;

  .nav {
    width: 100%;
    height: 1rem;
    background-color: brown;
    color: #ffffff;
    font-size: .3rem;
    text-align: center;
    line-height: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    padding: 0 10px;
    .title{
      flex: 1;
    }
  }
}

::v-deep .van-button--info {
  color: #ffffff;
  background-color: #a52a2a;
  border: 1px solid rgba(255, 255, 255, 0.5);
}
</style>
